import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
// 引入 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' //国际化

import { createPinia } from 'pinia'
import persistedState from 'pinia-persistedstate'
import mitt from 'mitt'
// 权限配置
import directive from './directive/index'

// 轮播
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
// import 'swiper/css/Direction';
import './mock/index.js' // mock

import VTable from '@/components/v-table/index.vue'
import VForm from '@/components/v-table/form.vue'
import VSearch from '@/components/v-table/search.vue'

const app = createApp(App)

// 将 Element Plus 的图标全局注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  if (!app.component(key)) {
    app.component(key, component)
  }
}

const store = createPinia()
// pinia本地持久化，将menu模块的数据存储到localStorage
store.use(
  persistedState({
    key: 'erabbit-shop',
    paths: ['menu']
  })
)

// 兄弟组件数据的传递
const Mit = mitt()
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}
app.config.globalProperties.$Bus = Mit // 全局兄弟组件传递数据
app
  .component('VTable', VTable)
  .component('VForm', VForm)
  .component('VSearch', VSearch)
  .component('Swiper', Swiper)
  .component('SwiperSlide', SwiperSlide)
  .use(ElementPlus, { locale: zhCn })
  .use(router)
  .use(store)
  .use(directive)
  .mount('#app')
